<template>
  <div>
    <PageWrapper :contentFullHeight="true">
      <BasicTable
        @register="registerTable"
        :rowSelection="{
          type: 'checkbox',
          selectedRowKeys: checkedKeys,
          onChange: onSelectChange,
        }"
      >
        <!-- 状态标识 -->
        <template #status="{ text: status }">
          <span>
            <Tag
              :color="
                status === '8'
                  ? 'green'
                  : status === '1'
                  ? 'blue'
                  : status === '16'
                  ? 'red'
                  : 'orange'
              "
            >
              {{ proxy.$filters.filterDocumentStatus(status) }}
            </Tag>
          </span>
        </template>
        <!-- 表格顶部左侧区域 -->
        <template #tableTitle>
          <Alert type="info" show-icon>
            <template #message>
              <template v-if="checkedKeys.length > 0">
                <span
                  >{{ t('common.selected') }}{{ checkedKeys.length }}{{ t('common.records') }}</span
                >
                <a-button type="link" @click="checkedKeys = []" size="small">{{
                  t('common.clear')
                }}</a-button>
              </template>
              <template v-else>
                <span>{{ t('common.noSelected') }}</span>
              </template>
            </template>
          </Alert>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                tooltip: t('common.edit'),
                icon: 'ant-design:edit-outlined',
                onClick: handleEdit.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <!-- onlyOffice预览 -->
      <onlyOffice @register="registerOnlyOfficeModal" />
    </PageWrapper>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue';
  import { Alert, Tag } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useModal } from '/@/components/Modal';
  import { GetDocEditRecord } from '/@/api/demo/document';
  import { getShareColumns, getAShareConfig } from './tableData';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';

  // 引入onlyoffice组件
  import onlyOffice from '/@/views/demo/documentManager/components/onlyOffice.vue';

  const { t } = useI18n();
  const useCommonStore = useUserStore();
  const { proxy }: any = getCurrentInstance();
  const { createMessage } = useMessage();

  const checkedKeys = ref<Array<string | number>>([]); // 选中的键
  const selectedRows = ref<any>([]); // 选中的行数据

  // 当选中的行发生改变时调用
  const onSelectChange = (selectedRowKeys: (string | number)[], selectedRowsData: any) => {
    checkedKeys.value = selectedRowKeys; // 更新选中的键
    selectedRows.value = selectedRowsData; // 更新选中的行数据
  };

  // 编辑
  const handleEdit = (record) => {
    const configList = {
      oId: record.oid,
      version: record.docVersion,
      userId: useCommonStore.userInfo.userId,
      mode: 'edit',
    };
    openPreviewModal(true, { configList });
  };

  // 表格初始化
  const [registerTable] = useTable({
    columns: getShareColumns(), // 表格列配置
    api: GetDocEditRecord, // 表格数据请求方法
    beforeFetch: (params) => {
      params.userId = useCommonStore.userInfo.userId;
      return params;
    },
    bordered: true,
    useSearchForm: true,
    formConfig: getAShareConfig(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: false,
    rowKey: 'oid',
    maxHeight: 220,
    actionColumn: {
      width: 100,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerOnlyOfficeModal, { openModal: openPreviewModal }] = useModal();
</script>
